import React, { FC, useImperativeHandle, forwardRef, ForwardRefRenderFunction } from 'react';
import { Modal, Button, Form, Input, message } from 'antd';
import { SpeNameReg } from '@/utils/reg';
import { history } from 'umi';

export type DataSourceItem = {
  id?: number | string;
  name: string;
  description: string;
}

interface Props {
  data: DataSourceItem | null;
  // isModalVisible: boolean;
  handleOk: () => void;
  handleCancel: () => void;
  // ref: any;
}

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 18 },
};

const DataSourceDialog: ForwardRefRenderFunction<unknown, Props> = (props: Props, ref) => {
  // const { data, isModalVisible, handleOk, handleCancel, } = props;

  const { data, handleOk, handleCancel } = props;

  const isEdit = !!data;

  const [form] = Form.useForm();

  useImperativeHandle(ref, () => ({
    form
  }));

  // const onFinish = async (values: any) => {
  //   console.log('Received values of form: ', values);
  //   // const { name, description, dsType, dataTask, dataType, ownerType, sourceType, withAnnot, annotFormat } = values;

  //   // // TODO: 需要和后端确认
  //   // let filePath = null, fileName = null;

  //   // if (dsType === "unstructured") {
  //   //   const { code, data, msg } = await addUnstructuredDataSet({ name, description, ownerType, dataType, dataTask, withAnnot, annotFormat, sourceType, filePath, fileName });
  //   //   if (code === 0) {
  //   //     message.success('创建成功！');
  //   //     // 跳转到数据集仓库页面
  //   //     history.push('/dataManage/dataSet/list');
  //   //   } else {
  //   //     message.error(`创建数据集失败：${msg}`);
  //   //   }
  //   // }
  // };


  return (
    // <Modal title={`${isEdit ? '编辑' : '新增'}数据池`} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
    <Modal title={`${isEdit ? '编辑' : '新增'}数据池`} onOk={handleOk} onCancel={handleCancel} visible>
      <Form
        form={form}
        {...layout}
        // onFinish={onFinish}
        initialValues={{
          name: data?.name || '',
          description: data?.description || '',
        }}
      >
        <Form.Item
          label="名称"
          name="name"
          rules={[{ required: true, message: '请输入名称' }, SpeNameReg]}
        >
          <Input placeholder='请输入数据池名称' maxLength={100} />
        </Form.Item>
        <Form.Item label="描述" name='description'>
          <Input.TextArea showCount maxLength={2000} placeholder='请输入描述' rows={5} />
        </Form.Item>
      </Form>
    </Modal>
  );
}

export default forwardRef<unknown, Props>(DataSourceDialog);